import React from 'react';
import { Form, Icon, Input, Button, notification } from 'antd';
const FormItem = Form.Item;

import styles from './index.css';

class Login extends React.Component{

  constructor(props){

    super(props);
    this.state = {
      btnStatus:false
    }

  }

  sucLogin = () => {

    this.props.sucCb();

  }

  handleSubmit = (e) => {

    e.preventDefault();

    this.props.form.validateFields((err, values) => {

      if (!err) {

        console.log('Received values of form: ', values);

        this.setState({

          btnStatus:true

        })

        //登陆请求

        sessionStorage.setItem('username','Larry')

        this.sucLogin();

      }else {
        
        notification['error']({
          message: '警告提示',
          description: '用户名和密码不能为空',
          top:100
        });

      }
    });
  }

  render(){

    const { getFieldDecorator } = this.props.form;

    return(

      <div className={styles.loginBg}>

        <Form onSubmit={this.handleSubmit} className={styles.loginForm}>

          <div className={styles.title}>XXX后台管理系统</div>

          <FormItem hasFeedback className={styles.item}>
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: ' ' }]
            })(
              <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="用户名" />
            )}
          </FormItem>

          <FormItem hasFeedback className={styles.item}>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: ' '}]
            })(
              <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />
            )}
          </FormItem>

          <FormItem>
            <Button type="primary" htmlType="submit" className={styles.loginButton} loading={this.state.btnStatus}>
              登陆
            </Button>
          </FormItem>

        </Form>

      </div>

    )

  }

}


export default Login = Form.create()(Login);
